import { useState, useEffect, useCallback } from "react";
import BaseEchart from "@/components/BaseEchart";
import * as echarts from "echarts";
import type { EChartsOption } from "echarts";
import guangdong from "@/assets/map/guangdong.json";

const BaseMap = () => {
	// https://geo.datav.aliyun.com/areas_v3/bound/460000_full.json
	console.log("guangdong: ", guangdong);
	echarts.registerMap("guangdong", { geoJSON: guangdong });

	const opt: EChartsOption = {
		visualMap: {
			show: true,
			min: 100,
			max: 10000,
			text: ["高", "低"],
			left: "right",
			realtime: true,
			calculable: true,
			inRange: {
				color: ["#ff0", "#ff0", "#f00", "#00f", "#f0f"]
			}
		},
		tooltip: {
			textStyle: {
				fontSize: "15",
				fontWeight: "bold"
			},
			trigger: "item",
			formatter: "{b}: {c} <br/>值1: 11111<br/>值2: 1888<br/>值2: 2222<br/>"
		},
		geo: {
			type: "map",
			map: "guangdong"
		},
		series: [
			{
				name: "完成量（万元）",
				type: "map",
				map: "guangdong",
				label: {
					show: true,
					formatter: ">{b}<\n{c}"
				},
				data: [
					{ value: 4965, name: "汕尾" },
					{ value: 5536, name: "珠海" },
					{ value: 7206, name: "河源" },
					{ value: 9092, name: "潮州" },
					{ value: 9379, name: "云浮" },
					{ value: 10127, name: "清远" },
					{ value: 10487, name: "中山" },
					{ value: 11625, name: "惠州" },
					{ value: 11748, name: "梅州" },
					{ value: 11937, name: "揭阳" },
					{ value: 12459, name: "韶关" },
					{ value: 12788, name: "肇庆" },
					{ value: 13406, name: "湛江" },
					{ value: 13507, name: "阳江" },
					{ value: 14692, name: "茂名" },
					{ value: 14698, name: "汕头" },
					{ value: 18866, name: "江门" },
					{ value: 24162, name: "佛山" },
					{ value: 33399, name: "东莞" },
					{ value: 37537, name: "广州" }
				]
			},
			{
				type: "lines",
				symbol: "circle",
				symbolSize: [5, 5],
				opacity: 0.8,
				label: {
					show: true,
					padding: [7, 10],
					color: "#000",
					backgroundColor: "#eee",
					borderRadius: 6,
					// formatter: "延伸线: {b}/{c}",
					formatter: (params) => {
						return `延伸线\n${params.name + params.value}`;
					}
				},
				effect: {
					show: true,
					trailLength: 0.1,
					symbol: "arrow",
					symbolSize: 3
				},
				data: [
					{
						name: "河源",
						value: 976,
						coords: [
							[114.7, 24],
							[115, 25.5]
						]
					},
					{
						name: "中山",
						value: 10487,
						coords: [
							[113.4, 22.5],
							[114.1, 21.1]
						]
					},
					{
						name: "珠海",
						value: 5536,
						coords: [
							[113.3, 22.1],
							[113.1, 21.5]
						]
					},
					{
						name: "佛山",
						value: 24162,
						coords: [
							[113, 23],
							[111, 24]
						]
					},
					{
						name: "东莞",
						value: 33399,
						coords: [
							[113.9, 23],
							[114.9, 21.9]
						]
					},
					{
						name: "汕头",
						value: 14698,
						coords: [
							[116.575361, 23.322231],
							[116.7, 22.5]
						]
					}
				]
			}
		]
	};

	return (
		<BaseEchart
			option={opt}
			style={{ height: "500px", flex: 1 }}
		/>
	);
};

export default BaseMap;
